<template>
  <div class="ele-exception">
    <div class="ele-exception-img">
      <template v-if="image != null">
        <img
          :src="image"
          class="ele-exception-img-element"
        >
      </template>
      <template v-else>
        <img
          v-if="status === '403'"
          class="ele-exception-img-element"
          src="../Resource/image/403.svg"
        >
        <img
          v-if="status === '404'"
          class="ele-exception-img-element"
          src="../Resource/image/404.svg"
        >
        <img
          v-if="status === '500'"
          class="ele-exception-img-element"
          src="../Resource/image/500.svg"
        >
      </template>
    </div>
    <div class="ele-exception-content">
      <div class="ele-exception-content-title">
        {{ title == null ? status : title }}
      </div>
      <template v-if="describe == null">
        <div
          v-if="status === '403'"
          class="ele-exception-content-describe"
        >
          抱歉，你无权访问该页面
        </div>
        <div
          v-if="status === '404'"
          class="ele-exception-content-describe"
        >
          抱歉，你访问的页面不存在
        </div>
        <div
          v-if="status === '500'"
          class="ele-exception-content-describe"
        >
          抱歉，服务器出错了
        </div>
      </template>

      <template v-else>
        <div class="ele-exception-content-describe">
          {{ describe }}
        </div>
      </template>

      <div class="ele-exception-content-actions">
        <el-button
          type="primary"
          @click="back"
        >
          返回首页
        </el-button>
        <el-button @click="refresh">
          刷新试试
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, useContext } from '@vue/runtime-core'
import { ElButton } from 'element-plus'

const context = useContext()

const props = defineProps({
  status: {
    type: [String],
    required: true,
  },
  image: {
    type: [String],
    required: false,
  },
  title: {
    type: [String],
    required: false,
  },
  describe: {
    type: [String],
    required: false,
  },
})

const back = function () {
  context.emit('back')
}

const refresh = function () {
  context.emit('refresh')
}
</script>
<style>
.ele-exception {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 80%;
  min-height: 500px;
}
.ele-exception-img {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  width: 50%;
  padding-right: 152px;
  zoom: 1;
}
.ele-exception-img-element {
  float: right;
  width: 90%;
  height: 340px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}
.ele-exception-content {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
}
.ele-exception-content .ele-exception-content-title {
  margin-bottom: 24px;
  color: #434e59;
  font-weight: 600;
  font-size: 72px;
  line-height: 72px;
}
.ele-exception-content .ele-exception-content-describe {
  margin-bottom: 16px;
  color: #808695;
  font-size: 18px;
  line-height: 28px;
}
.ele-exception-content-actions {
  margin-top: 20px;
}
</style>
